<template>
  <div class="search-result">
    <div class="sticky-container">
      <van-tabs v-model="active" sticky animated swipeable color="skyblue">
        <van-tab v-for="item in tabs" :key="item.id" :title="item.ch_name" />
      </van-tabs>
    </div>

    <DynamicComponent :is="component_name" :keywords="keywords" />
  </div>
</template>

<script>
import SearchResultItem from "@/components/basics/SearchResultItem.vue";

import song from "./navcomponent/song.vue";
import album from "./navcomponent/album.vue";
import singer from "./navcomponent/singer.vue";
import playlist from "./navcomponent/playlist.vue";
import user from "./navcomponent/user.vue";
import mv from "./navcomponent/mv.vue";
import lyric from "./navcomponent/lyric.vue";
import dj from "./navcomponent/dj.vue";
import video from "./navcomponent/video.vue";
import all from "./navcomponent/all.vue";
export default {
  components: {
    SearchResultItem,
    song,
    album,
    singer,
    playlist,
    user,
    mv,
    lyric,
    dj,
    video,
    all,
  },
  name: "SearchResult",
  props: {
    keywords: String,
  },
  methods: {
    /*
    搜索说明 : 调用此接口 , 传入搜索关键词可以搜索该音乐 / 专辑 / 歌手 / 歌单 / 用户 , 关键词可以多个 , 以空格隔开
    如 " 周杰伦 搁浅 "( 不需要登录 ), 搜索获取的 mp3url 不能直接用 , 可通过 /song/url 接口传入歌曲 id 获取具体的播放链接

    必选参数 :
      keywords : 关键词

    可选参数 : 
      limit : 返回数量 , 默认为 30
      offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0
      type: 搜索类型；默认为 1 即单曲
        取值意义 : 
          1: 单曲
          10: 专辑
          100: 歌手
          1000: 歌单
          1002: 用户
          1004: MV
          1006: 歌词
          1009: 电台
          1014: 视频
          1018:综合
          2000:声音(搜索声音返回字段格式会不一样)

    接口地址 : /search 或者 /cloudsearch(更全)

    调用例子 : /search?keywords=海阔天空 /cloudsearch?keywords=海阔天空
  */
  },
  data() {
    return {
      api_type_initValue: 1,

      tabs: [
        { id: 1, name: "song", ch_name: "单曲" },
        { id: 2, name: "album", ch_name: "专辑" },
        { id: 3, name: "singer", ch_name: "歌手" },
        { id: 4, name: "playlist", ch_name: "歌单" },
        { id: 5, name: "user", ch_name: "用户" },
        { id: 6, name: "mv", ch_name: "mv" },
        { id: 7, name: "lyric", ch_name: "歌词" },
        { id: 8, name: "dj", ch_name: "电台" },
        { id: 9, name: "video", ch_name: "视频" },
        { id: 10, name: "all", ch_name: "综合" },
        { id: 11, name: "sound", ch_name: "声音" },
      ],
      active: 0,
      component_name: "song",
    };
  },
  watch: {
    // 搜索顶部切换变化
    active(index) {
      this.component_name = this.tabs[index].name;
    },
  },
};
</script>

<style lang="less" scoped>
.search-result {
  width: 95%;
  margin: 0 auto;

  .sticky-container {
    position: sticky;
    top: 45px;
  }
}
</style>